<template>
	<view class="teacher-index">
		<view class="filter-box">
			<view class="class-filter" @click="showClass = !showClass">
				<view class="filter-title-word">
					{{
            curClass.name
              ? selectedNamsClass.join("/") + "/" + curClass.name
              : "选择班级"
          }}
				</view>
				<u-icon :name="showClass ? 'arrow-up-fill' : 'arrow-down-fill'"
					color="#333" size="12"></u-icon>
			</view>
			<view class="filter-modal">
				<FilterModal @getFilterData="getRecordFilterData"
					:filterType="filterType" class="type-filter"></FilterModal>
			</view>
		</view>
		<view class="entry-list" v-if="active == '录入列表'">
			<EntryList ref="entry" :filterData="filterData"
				v-if="active == '录入列表'"></EntryList>
		</view>
		<view class="analysis-list" v-if="active == '年级成绩分析'">
			<AnalysisList ref="analysis" :filterData="filterData"
				v-if="active == '年级成绩分析'"></AnalysisList>
		</view>
		<view class="publish-list" v-if="active == '公布排名'">
			<PublishList ref="publish" :filterData="filterData"></PublishList>
		</view>

		<!-- 班级列表 -->
		<slice-select key="class" v-if="showClass"
			:default-checked-key="curClass.id"
			:default-selected-key-list="selectedKeyListClass"
			source-type="class" :soure-list="classTree"
			@onChecked="onCheckedSliceSelectClass">
		</slice-select>
	</view>
</template>

<script>
	import sliceSelect from "@/pages/achievement/components/slice-select.vue";
	import FilterModal from "@/pages/achievement/components/FilterModal.vue";

	import EntryList from "./components/entryList.vue";
	import PublishList from "./components/publishList.vue";
	import AnalysisList from "./components/analysisList.vue";

	import { gradeTree } from "@/pages/achievement/api/common.js";

	import { mapState } from "vuex";

	export default {
		props: {
			active: {
				type: String,
				default: () => "录入列表",
			},
		},
		components: {
			sliceSelect,
			FilterModal,
			EntryList,
			PublishList,
			AnalysisList
		},
		computed: {
			...mapState(["userInfo"]),
			filterType() {
				if (this.active == '年级成绩分析') {
					return ['type']
				} else {
					return ['scale', 'type', 'course',
						'status'
					]
				}
			},
		},
		data() {
			return {
				showClass: false,
				selectedKeyListClass: [],
				selectedNamsClass: [],
				classTree: [],
				curClass: {
					id: "",
				},
				filterData: {},
			};
		},
		mounted() {
			this.getGradeTree();
		},
		methods: {
			// 获取班级树
			getGradeTree() {
				let that = this;
				let params = {
					deptType: "class",
					isAuth: true,
				};
				gradeTree(params).then((res) => {
					let { code, data, msg } = res;
					if (Number(code) === 0) {
						// let {
						// 	selectedKeyListClass,
						// 	selectedNamsClass,
						// 	curClass
						// } = this.initClassData(data.list)
						this.classTree = data.list;
						// this.selectedKeyListClass = selectedKeyListClass
						// this.selectedNamsClass = selectedNamsClass
						// this.curClass = curClass
					} else {
						uni.showToast({
							icon: "fail",
							title: msg,
						});
					}
				});
			},
			// 切换班级
			onCheckedSliceSelectClass(sliceSelectData) {
				console.log(sliceSelectData);
				if (sliceSelectData.item) {
					let { selectedKeyList, selectedNams, item } = sliceSelectData;
					this.selectedKeyListClass = selectedKeyList;
					this.selectedNamsClass = selectedNams.map(item => item.split(
						'_')[0]);
					this.curClass = item;
					this.filterData.classId = item.id;
				}

				if (sliceSelectData.hide) {
					this.showClass = false;
				}
			},
			getRecordFilterData(data) {
				this.filterData = { ...this.filterData, ...data };
			},
		},
	};
</script>

<style scoped lang="scss">
	.teacher-index {
		height: 100%;
	}

	.filter-box {
		height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 0 30rpx;

		.class-filter {
			display: flex;
			justify-content: flex-end;
			z-index: 3;
			max-width: 520rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.entry-list,
	.publish-list,
	.analysis-list{
		height: calc(100% - 88rpx);
		// overflow-y: scroll;
	}
</style>
